<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>list</title>

        <style>
            table {
                border-collapse: collapse;
                margin: 0 auto;
            }

            table tr td {
                border: 1px solid black;
                text-align: center
            }
        </style>

    </head>


    <body>
        <!-- 组件名称：通用表单 -->
        <!-- 组件作用：把删除超链接的 GET 请求转换为 POST，并携带 _method 请求参数 -->
        <form id="convertForm" method="post">

            <!-- 请求参数作用：告诉服务器端 hiddenHttpMethodFilter 要转换的目标请求方式 -->
            <!-- 请求参数名：_method，这是 hiddenHttpMethodFilter 中规定的 -->
            <!-- 请求参数值：delete，这是因为我们希望服务器端将请求方式最终转换为 delete -->
            <input type="hidden" name="_method" value="delete"/>
        </form>
        <table id="dataTable">
            <tr>
                <th>电影ID</th>
                <th>电影名称</th>
                <th>电影价格</th>
                <th>删除</th>
                <th>更新</th>
            </tr>
            <tbody th:if="${#lists.isEmpty(movieList)}">
                <tr>
                    <td colspan="5">抱歉！没有查询到数据</td>
                </tr>
                <tr>
                    <td colspan="5">
                        <a th:href="@{/movie/add/page}">跳转到添加表单页面</a>
                    </td>
                </tr>
            </tbody>

            <tbody th:if="${not #lists.isEmpty(movieList)}">
                <tr th:each="movie : ${movieList}">
                    <td th:text="${movie.movieId}">这里显示电影ID</td>
                    <td th:text="${movie.movieName}">这里显示电影名称</td>
                    <td th:text="${movie.moviePrice}">这里显示电影价格</td>
                    <td><a th:href="@{/movie/}+${movie.movieId}" @click="doConvert">删除</a></td>
                    <td><a th:href="@{/movie/}+${movie.movieId}">更新</a></td>
                </tr>
                <tr>
                    <td colspan="5">
                        <a th:href="@{/movie/add/page}">跳转到添加表单页面</a>
                    </td>
                </tr>
            </tbody>
        </table>

        <script th:src="@{/script/vue.js}"></script>
        <script>
            new Vue({
                "el": "#dataTable",
                "methods": {
                    doConvert(event) {
                        let formEle = document.getElementById("convertForm");
                        formEle.action = event.target.href;
                        // 3.提交表单
                        formEle.submit()
                        event.preventDefault()
                    }
                }
            })
        </script>
    </body>
</html>